<template>
    <div>
        年龄：{{ age }}
        <button @click="handck">年龄++</button>
    </div>
</template>

<script lang='ts' setup>
import { defineProps,defineEmits } from "vue"
    
defineProps({
    age:{
        type:Number,
        defaault:18
    }
})

 const emit = defineEmits<{
    (event: 'fn',val:number): void
    }>()

    const handck = ()=>{
        emit('fn',22)
    }




    /*
        vue2的父传子是  子组件在props里面定义要从父组件传下来的数据。然后使用
        而vue3的父传子是要在子组件里面先引入一个 defineProps，然后使用defineProps({属性名：{type:xxx,default:xxx}})


        vue2的子组件传递参数给父组件  
        先在父组件的子组件上自定义一个函数，这个函数将会触发给父组件的一个方法，然后在子组件内部自定义一个方法然后使用
        this.$emit('父组件中自定义的事件名'，要传递给父组件的参数的值)

        vue3中的子传父  
        同样在父组件中定义自定义函数，然后在子组件里面引入 defineEmits 语法 
         let emit = defineEmits<{(event:'父组件自定义的事件名称',val:any  '定义要传递过去的值'):void}>()

         然后直接在方法里面使用 emit('fn',2)
    */
</script>
 
<style lang = "less" scoped>
    
</style>